@import './variables';

.docs-component-card {
  transition: all var(--amplify-time-medium) ease;
  cursor: pointer;
  color: var(--amplify-colors-font-secondary);
  padding: var(--amplify-space-large);
  border: var(--amplify-border-widths-small) solid
    var(--amplify-colors-border-secondary);
  box-shadow: none;
}

.docs-component-card:hover {
  transform: scale(1.05);
  box-shadow: var(--amplify-shadows-small);
}

.docs-component-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  @media (min-width: $breakpoint-small) {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

.docs-component-link {
  margin-inline-end: var(--amplify-space-medium);
  margin-block-start: var(--amplify-space-medium);
  display: flex;
  flex-direction: row;
  align-items: center;
}
